import React, { useEffect, useState } from 'react';
import { Navbar } from '../../components';

import styles from './index.module.css';

import 'react-virtualized/styles.css';
import { Space } from 'antd-mobile';
import { SearchOutline } from 'antd-mobile-icons';
import useRequest from '../../hooks/use-request';
import { cityListOrder } from '../../utils/citylist-order';

interface ICityList<T> {
  label: T;
  value: T;
  pinyin: T;
  short: T;
}

const CityList = () => {
  const [citylist, SetCityList] = useState<ICityList<string>[]>([]);
  const { result, loading } = useRequest(
    '/area/city',
    {
      level: 1,
    },
    undefined
  );

  useEffect(() => {
    if (!result) return;
    const { body: data } = result;
    SetCityList(data);
  }, [citylist, loading, result]);
  if (loading) return null;
  const orderCity = cityListOrder(citylist);
  console.log(orderCity);

  return (
    <div className={styles.cityList}>
      <Navbar
        title={'城市选择'}
        style={styles.navHeader}
        right={
          <div style={{ fontSize: 18 }}>
            <Space>
              <SearchOutline />
            </Space>
          </div>
        }
      />
    </div>
  );
};

export default CityList;
